<template>
  <Teleport to="body">
    <div class="bodys" v-show="isno"></div> 
  </Teleport>
  <div class="homes">
    <el-container>
      <el-header style="height: 32px;">
        <button @click="qp">{{ isFullScreen ? '退出全屏' : '全屏' }}<el-icon>
            <FullScreen />
            
          </el-icon></button>
          <span>{{ currentTime }}</span> <!-- 显示当前时间 -->
        <button @click="ms" style="z-index: 99;"> {{ isDark ? '正常模式' : '锁定模式' }}<el-icon>
            <Sort />
          </el-icon></button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 导航栏 -->
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            :default-active="jl" text-color="#fff" @open="handleOpen">
            <el-menu-item index="1" @click="f1('homes')">
              <template #title>
                <el-icon>
                  <House />
                </el-icon>
                <span>主页</span>
              </template>
            </el-menu-item> 
            <el-menu-item index="2" @click="f1('recycle')">
              <el-icon>
                <Histogram />
              </el-icon>
              <span>图形可视化</span>
            </el-menu-item>
            <el-menu-item index="3" @click="f1('transaction')">
              <el-icon>
                <Mug />
              </el-icon>
              <span>订单</span>
            </el-menu-item>
            <el-menu-item index="4" @click="f1('maintenance')">
              <el-icon>
                <Document />
              </el-icon>
              <span>任务列表</span>
            </el-menu-item>
            <el-menu-item index="5" @click="f1('login')">
              <el-icon>
                <CircleClose />
              </el-icon>
              <span>退出登录</span>
            </el-menu-item>
            <el-menu-item index="6" disabled>
              <el-icon>
                <setting />
              </el-icon>
              <span>超级权限设置</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 内容 -->
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/home' }" @click="f2('主页')">主页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="item, index in arr1" :key="index" :to="{ name: item.names }"
              @click="f2(item.name)">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
let currentTime = ref('00:00:00')
function updateTime() {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`
}
setInterval(updateTime, 1000)
import { ArrowRight } from "@element-plus/icons-vue";
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { useRouter } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

let isFullScreen = ref(false)
let isno=ref(true)

// 切换全屏状态
function toggleFullScreen() {
  if (!isFullScreen.value) {
    // 进入全屏
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen()
    } else if (document.documentElement.webkitRequestFullScreen) {
      document.documentElement.webkitRequestFullScreen()
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen()
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen()
    }
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
  isFullScreen.value = !isFullScreen.value
}

// 点击全屏按钮
function qp() {
  toggleFullScreen()
}
const router = useRouter()
onMounted(() => {
  router.push({ name: 'homes' })
})
let isDark = ref(false)
// 切换模式
function ms() {
  isDark.value = !isDark.value
  // 根据当前模式设置页面样式
  if (isDark.value) {
    document.body.classList.add('dark-mode')
  } else {
    document.body.classList.remove('dark-mode')
  }
  isno.value=!isno.value
}
let arr1 = reactive([])
let jl = ref('1')
let names = ref('')
//记录路径
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
  if (key != 1) {
    arr1.push(key)
  }
};
//转换路径
watch(arr1, (val1, val2) => {
  for (let index = 0; index < arr1.length; index++) {
    const element = arr1[index];
    if (element == 2) {
      arr1.splice(index, 1, { name: '图形可视化', names: 'recycle' })
    }
    if (element == 3) {
      arr1.splice(index, 1, { name: '订单', names: 'transaction' })
    }
    if (element == 4) {
      arr1.splice(index, 1, { name: '任务列表', names: 'maintenance' })
    }
    if (element == 5) {
      arr1.splice(index, 1, { name: '退出登录', names: 'Login' })
    }
  }
})
//跳转页面
function f1(val) {
  router.push({ name: val })
}
function f2(val) {
  // console.log(val);
  if (val == '主页') {
    jl.value = '1'
  }
  if (val == '图形可视化') {
    jl.value = '2'
  }
  if (val == '订单') {
    jl.value = '3'
  }
  if (val == '任务列表') {
    jl.value = '4'
  }
  if (val == '退出登录') {
    jl.value = '5'
  }
}
</script>

<style lang="less" scoped>
.bodys{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.422);
  position: absolute;
  top: 0;left: 0;
}
.el-menu {
  height: 96vh;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 4vh;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 96vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 96vh;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100px;
  margin: 0 10px;
}
/* 夜间模式样式 */
.dark-mode {
  background-color: #333;
  color: #fff;
}
</style>